{$layout}

<p class="ui message error" v-for="message in messages" v-html="message"></p>

<p class="ui message warning" v-if="apps.length == 0">暂时还没有检测到服务<span v-if="countProbes == 0">，<a href="/apps/square">去添加服务探针</a></span>。</p>

<!-- 已关注的 -->
<div v-if="hasFavoredApps">
    <h3>已关注</h3>

    <div class="table-box" v-for="app in apps" v-if="app.isFavored">
        <table class="ui table selectable" :class="{loading:refreshingAppId == app.id}">
            <thead>
            <tr>
                <th colspan="2" nowrap="">
                    <i class="icon gem outline" :class="{grey:!app.isRunning, green:app.isRunning}"></i>
                    {{app.name}} &nbsp;
                    &nbsp;<a href="" title="更多信息" v-on:click.prevent="showApp(app.id)"><i class="ui icon info circle small grey"></i></a>
                    <a :href="app.site" v-if="app.site.length > 0" target="_blank" title="打开官方网站"><i class="ui icon external small grey"></i> </a>
                    <a :href="app.docSite" v-if="app.docSite.length > 0" target="_blank" title="打开文档网站"><i class="ui icon book small grey"></i> </a>
                    <a href="" v-on:click.prevent="reloadApp(app.id)"><i class="ui icon refresh small grey"></i></a>

                    <a href="" title="关注" v-if="!app.isFavored" v-on:click.prevent="favor(app)"><i class="ui icon heart outline small grey"></i></a>
                    <a href="" title="取消关注" v-if="app.isFavored" v-on:click.prevent="cancelFavor(app)"><i class="ui icon heart small grey"></i> </a>
                </th>
            </tr>
            </thead>
            <tr>
                <td>CPU: {{app.cpuPercent}}%</td>
                <td>内存：{{app.memoryRSS}}M</td>
            </tr>
            <tr>
                <td>
                    <p>进程数：{{app.countProcesses}}</p>
                </td>
                <td>
                    <p>绑定地址：{{app.countListens}}</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>连接数：{{app.countConnections}}</p>
                </td>
                <td>
                    <p>打开的文件：{{app.countOpenFiles}}</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="clear"></div>
    <div class="ui fitted divider"></div>
</div>

<!-- 未关注的 -->
<div v-if="apps.length > 0 && hasNotFavoredApps" :class="{'other-apps':hasFavoredApps}">
    <h3 v-if="hasFavoredApps">未关注</h3>
    <h3 v-if="!hasFavoredApps"></h3>

    <div class="table-box" v-for="app in apps" v-if="!app.isFavored">
        <table class="ui table selectable" :class="{loading:refreshingAppId == app.id}">
            <thead>
            <tr>
                <th colspan="2">
                     <i class="icon gem outline" :class="{grey:!app.isRunning, green:app.isRunning}"></i>
                     {{app.name}} &nbsp;
                    &nbsp;<a href="" title="更多信息" v-on:click.prevent="showApp(app.id)"><i class="ui icon info circle small grey"></i></a>
                     <a :href="app.site" v-if="app.site.length > 0" target="_blank" title="打开官方网站"><i class="ui icon external small grey"></i> </a>
                     <a :href="app.docSite" v-if="app.docSite.length > 0" target="_blank" title="打开文档网站"><i class="ui icon book small grey"></i> </a>
                     <a href="" v-on:click.prevent="reloadApp(app.id)"><i class="ui icon refresh small grey"></i></a>

                    <a href="" title="关注" v-if="!app.isFavored" v-on:click.prevent="favor(app)"><i class="ui icon heart outline small grey"></i> </a>
                    <a href="" title="取消关注" v-if="app.isFavored" v-on:click.prevent="cancelFavor(app)"><i class="ui icon heart small grey"></i> </a>
                </th>
            </tr>
            </thead>
            <tr>
                <td>CPU: {{app.cpuPercent}}%</td>
                <td>内存：{{app.memoryRSS}}M</td>
            </tr>
            <tr>
                <td>
                    <p>进程数：{{app.countProcesses}}</p>
                </td>
                <td>
                    <p>绑定地址：{{app.countListens}}</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>连接数：{{app.countConnections}}</p>
                </td>
                <td>
                    <p>打开的文件：{{app.countOpenFiles}}</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="clear"></div>
</div>

<!-- App详情 -->
<div class="ui modal visible active tiny" v-if="showAppDetail">
    <div class="header">{{detailApp.name}}  &nbsp; <span class="ui label tiny">由“{{detailApp.pluginName}}”插件检测</span>
        <a href="" v-on:click.prevent="closeApp()"><i class="icon close"></i></a>
    </div>

    <div class="ui text menu blue">
        <a href="" class="item" :class="{active:detailTab=='system'}" v-on:click.prevent="detailTab = 'system'">系统信息</a>
        <a href="" class="item" :class="{active:detailTab=='processes'}" v-on:click.prevent="detailTab = 'processes'">进程列表</a>
        <a href="" class="item" :class="{active:detailTab=='listens'}" v-on:click.prevent="detailTab = 'listens'">绑定地址</a>
        <a href="" class="item" :class="{active:detailTab=='connections'}" v-on:click.prevent="detailTab = 'connections'">网络连接</a>
        <a href="" class="item" :class="{active:detailTab=='openFiles'}" v-on:click.prevent="detailTab = 'openFiles'">打开的文件</a>
        <a href="" class="item" :class="{active:detailTab=='developer'}" v-on:click.prevent="detailTab = 'developer'">开发者</a>
    </div>

    <!-- 系统信息 -->
    <div class="content" v-if="detailTab=='system'">
        <table class="ui table selectable">
            <tr>
                <td>版本信息</td>
                <td>
                    <span class="version" v-if="detailApp.version.length > 0" v-html="detailApp.version"></span>
                    <span v-if="detailApp.version.length == 0">-</span>
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <span v-if="detailApp.isRunning" class="enabled">运行中</span>
                    <span v-if="!detailApp.isRunning">已停止</span>
                </td>
            </tr>
            <tr>
                <td class="title">CPU（比例）</td>
                <td>{{detailApp.cpuPercent}}%</td>
            </tr>
            <tr>
                <td>内存（RSS）</td>
                <td>{{detailApp.memoryRSS}}M</td>
            </tr>
            <tr>
                <td>内存（VMS）</td>
                <td>{{detailApp.memoryVMS}}M</td>
            </tr>
            <tr>
                <td>内存（比例）</td>
                <td>{{detailApp.memoryPercent}}%</td>
            </tr>
        </table>
    </div>

    <!-- 进程信息 -->
    <div class="content" v-if="detailTab=='processes'">
        <table class="ui table selectable">
            <tr v-if="detailApp.processes.length == 0">
                <td class="disabled">还没有启动进程。</td>
            </tr>
            <tr v-for="process in detailApp.processes">
                <td style="width:80px">
                    {{process.pid}}
                </td>
                <td>
                   {{process.cmdline}} <span class="disabled cwd" v-if="process.cwd.length > 0"> &nbsp; cwd: {{process.cwd}}</span>
                </td>
            </tr>
        </table>
    </div>

    <!-- 绑定的地址 -->
    <div class="content" v-if="detailTab=='listens'">
        <table class="ui table selectable">
            <tr v-if="detailApp.listens.length == 0">
                <td class="disabled">还没有绑定任何网络地址。</td>
            </tr>
            <tr v-for="listen in detailApp.listens">
                <td>
                    {{listen}}
                </td>
            </tr>
        </table>
    </div>

    <!-- 连接信息 -->
    <div class="content" v-if="detailTab=='connections'">
        <table class="ui table selectable">
            <tr v-if="detailApp.connections.length == 0">
                <td class="disabled">当前没有网络连接。</td>
            </tr>
            <tr v-for="connection in detailApp.connections">
                <td>
                    {{connection}}
                </td>
            </tr>
        </table>
    </div>

    <!-- 打开的文件 -->
    <div class="content" v-if="detailTab=='openFiles'">
        <table class="ui table selectable">
            <tr v-if="detailApp.openFiles.length == 0">
                <td class="disabled">当前没有打开的文件。</td>
            </tr>
            <tr v-for="openFile in detailApp.openFiles">
                <td>
                    {{openFile}}
                </td>
            </tr>
        </table>
    </div>

    <!-- 开发者信息 -->
    <div class="content" v-if="detailTab=='developer'">
        <table class="ui table selectable">
            <tr>
                <td class="title">开发者</td>
                <td>
                    <span v-if="detailApp.developer.length > 0">{{detailApp.developer}}</span>
                    <span v-if="detailApp.developer.length == 0">-</span>
                </td>
            </tr>
            <tr>
                <td>官方网站</td>
                <td>
                    <a v-if="detailApp.site.length > 0" :href="detailApp.site" target="_blank">{{detailApp.site}}</a>
                    <span v-if="detailApp.site.length == 0">-</span>
                </td>
            </tr>
            <tr>
                <td>文档网站</td>
                <td>
                    <a v-if="detailApp.docSite.length > 0" :href="detailApp.docSite" target="_blank">{{detailApp.docSite}}</a>
                    <span v-if="detailApp.docSite.length == 0">-</span>
                </td>
            </tr>
        </table>
    </div>
</div>
